<template>
  <div class="student-navBar-container">
    <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
      <el-tab-pane label="系统首页" name="first">
      </el-tab-pane>
      <el-tab-pane label="所有社团" name="second">
      </el-tab-pane>
      <el-tab-pane label="精彩活动" name="third">
      </el-tab-pane>
      <el-tab-pane label="我的社团" name="fourth" v-if="userStore.userInfo.role == 1">
      </el-tab-pane>
      <el-tab-pane label="个人中心" name="fifth">
      </el-tab-pane>
      <!-- <el-tab-pane label="活动照片墙" name="sixth">
      </el-tab-pane> -->
      <!-- <el-tab-pane label="学校简介" name="seventh">
      </el-tab-pane> -->
      <el-tab-pane label="社团守则" name="eighth">
      </el-tab-pane>
    </el-tabs>
    <!-- 搜索 -->
    <!-- <div class="search-box">
      <el-input v-model="input" placeholder="功能快捷搜索" size="large" :prefix-icon="Search" />
    </div> -->

    <!-- 右侧小功能 -->
    <div class="other">
      <!-- 设置 -->

      <el-dropdown trigger="click">
        <svg-icon icon-class="header-set " class="other-item" />
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item>修改密码</el-dropdown-item>
            <el-dropdown-item @click="handleLogOut">退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
      <!-- 信息 -->
      <!-- <svg-icon icon-class="header-message" class="other-item" /> -->
      <PersonInfo :show-info-dialog="showInfoDialog" @closeDialog="showInfoDialog=false"
        @openDialog="showInfoDialog=true" />
    </div>
  </div>
</template>
<script lang="ts" setup>
import { onMounted, ref } from 'vue';
import { Search } from '@element-plus/icons-vue'
import type { TabsPaneContext } from 'element-plus'
// 路由
import { useRouter } from "vue-router";
// useUserStoreHook
import { useUserStoreHook } from "@/store/modules/user";
import PersonInfo from './personInfo.vue'
const userStore = useUserStoreHook()


const router = useRouter();
const activeName = ref("first");
const input = ref('')
const handleClick = (tab: TabsPaneContext, event: Event) => {
  switch (tab.props.name) {
    case 'first':
      router.push('/student/home')
      break;
    case 'second':
      router.push('/student/society')
      break;
    case 'third':
      router.push('/student/activity')
      break;
    case 'fourth':
      router.push('/student/mySociety/checkApply')
      break;
    case 'fifth':
      router.push('/student/personCenter/myScore')
      break;
    case 'sixth':
      router.push('/student/beforeActivity')
      break;
    case 'seventh':
      router.push('/student/school')
      break;
    case 'eighth':
      router.push('/student/societyRule')
      break;
  }
}
let showInfoDialog = ref(false); // 是否展示物资信息编辑框

/**
 * 退出登录
 */
const handleLogOut = () => {
  ElMessageBox.confirm(
    '当前操作会退出登录，是否继续？',
    '提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      userStore.logout()
      ElMessage({
        type: 'success',
        message: '退出成功',
      })
    })
    .catch(() => {
    })
}

onMounted(() => {
  if (!userStore.userInfo.name) {
    showInfoDialog.value = true
  }
})
/**
 * 关闭完善信息弹框
 */
const handleCloseInfoDialog = () => {
  showInfoDialog.value = false
}
/**
 * 打开完善信息弹框
 */
const handleOpenInfoDialog = () => {
  showInfoDialog.value = true
}

</script>
<style lang="scss" scoped>
.student-navBar-container {
  height: 100%;
  background-color: #fff;
  box-shadow: var(--el-box-shadow-light);
  position: relative;

  .demo-tabs {
    place-self: center;
  }

  .search-box {
    position: absolute;
    top: 0;
    right: 40%;
    height: 100%;
    display: flex;
    align-items: center;
  }

  .other {
    position: absolute;
    top: 0;
    right: 20%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 10rem;

    .other-item {
      width: 2.4rem;
      height: 2.4rem;
      cursor: pointer;
    }
  }
}
</style>
<style lang="scss">
.student-navBar-container {
  // 调整 tabs 样式
  .el-tabs__item {
    transition: all 0.5s;
    font-size: 1.6rem;
    height: 6rem;
    line-height: 6rem;
    padding: 0 1rem;
    font-weight: 700;
    color: #777;
  }

  // 消除底部分割线
  .el-tabs__nav-wrap {
    &::after {
      display: none !important;
    }
  }

  .el-tabs__header {
    padding: 0 10%;
  }

  // 调整active时的线段
  .el-tabs__active-bar {
    background-color: $green;
  }

  .el-tabs__item.is-active,
  .el-tabs__item:not(.is-disabled):hover {
    color: $green;
    font-weight: 700;
  }
}
</style>
